<template>
	<uni-section title="修改密码" type="line">
		<view class="example">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData" label-position="top">
				<uni-forms-item label="旧密码" required name="o_pwd">
					<uni-easyinput type="password" v-model="valiFormData.o_pwd" placeholder="请输入旧密码" />
				</uni-forms-item>

				<uni-forms-item label="新密码" required name="n_pwd">
					<uni-easyinput type="password" v-model="valiFormData.n_pwd" placeholder="请输入新密码" />
				</uni-forms-item>

				<uni-forms-item label="重复密码" required name="r_pwd">
					<uni-easyinput type="password" v-model="valiFormData.r_pwd" placeholder="请重复输入新密码" />
				</uni-forms-item>
			</uni-forms>

			<button class="submit-btn" type="primary" @click="submit('valiForm')">提交修改</button>
		</view>
	</uni-section>
</template>

<script>
	import whtMd5 from '@/uni_modules/wht-md5/js_sdk/wht-md5.js'
	export default {
		data() {
			return {
				_id: '',
				valiFormData: {
					o_pwd: '',
					n_pwd: '',
					r_pwd: ''
				},
				rules: {
					o_pwd: {
						rules: [{
							required: true,
							errorMessage: '请输入旧密码'
						}, {
							minLength: 6,
							errorMessage: '必须6位数以上'
						}, ]
					},
					n_pwd: {
						rules: [{
							required: true,
							errorMessage: '请输入新密码'
						}, {
							minLength: 6,
							errorMessage: '必须6位数以上'
						}, ]
					},
					r_pwd: {
						rules: [{
							required: true,
							errorMessage: '请重复输入新密码'
						}, {
							minLength: 6,
							errorMessage: '必须6位数以上'
						}, ]
					}
				},
			}
		},
		mounted() {
			this._id = uni.$router.params._id
		},

		methods: {
			encrypt(pwd) {
				const hash32 = whtMd5(pwd)
				return hash32
			},

			submit(ref) {
				const npwd = this.encrypt(this.valiFormData.n_pwd)
				const opwd = this.encrypt(this.valiFormData.o_pwd)
				const rpwd = this.encrypt(this.valiFormData.r_pwd)
				this.$refs[ref].validate().then(res => {
					if (npwd == opwd) {
						uni.showToast({
							title: '新密码不能和旧密码相同',
							icon: 'none'
						})
						return
					}
					if (npwd != rpwd) {
						uni.showToast({
							title: '两次密码不一致',
							icon: 'none'
						})
						return
					}
					let event = {
						_id: this._id,
						data: {
							password: npwd
						}
					}
					let obj = uniCloud.importObject('users')
					let c = obj.getUserInfobyId(event).then(res => {
						if (res.code == 0) {
							if (res.data.password != opwd) {
								uni.showToast({
									title: '原密码不正确',
									icon: 'none'
								})
								return
							} else {
								let m = obj.modifyPwd(event).then(res => {
									uni.showToast({
										title: res.message,
										icon: 'none'
									})
									setTimeout(() => {
										uni.navigateBack();
									}, 1000);
								})
							}
						} else {
							uni.showToast({
								title: '原密码不正确',
								icon: 'none'
							})
							return
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(135deg, #e6f7ff, #f0f8ff);
		padding: 20rpx;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.uni-section {
		margin: 30rpx 20rpx;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 24rpx rgba(0, 105, 204, 0.1);
		background: #fff;
	}

	.uni-section__title {
		font-size: 36rpx;
		font-weight: 600;
		color: #0069cc;
		padding: 28rpx 30rpx;
		background: #f0f8ff;
		border-bottom: 1px solid #e0f0ff;
	}

	.example {
		padding: 40rpx 30rpx;
		background-color: #fff;
	}

	.uni-forms-item__label {
		font-size: 30rpx;
		font-weight: 500;
		color: #0069cc;
		margin-bottom: 16rpx;
	}

	.uni-forms-item {
		margin-bottom: 40rpx;
	}

	// 模拟输入框样式
	.uni-easyinput__content {
		border: 1px solid #d1e9ff;
		border-radius: 12rpx;
		padding: 20rpx 24rpx;
		background: #f9fcff;
		transition: all 0.3s;

		&:focus-within {
			border-color: #0069cc;
			box-shadow: 0 0 0 2px rgba(0, 105, 204, 0.2);
		}
	}

	.uni-easyinput__content-input {
		font-size: 28rpx;
		color: #333;
	}

	.submit-btn {
		background: linear-gradient(135deg, #0081ff, #0069cc);
		border: none;
		border-radius: 50rpx;
		height: 88rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #fff;
		margin-top: 40rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 105, 204, 0.3);
		transition: all 0.3s;

		&:active {
			transform: translateY(4rpx);
			box-shadow: 0 4rpx 12rpx rgba(0, 105, 204, 0.3);
		}
	}

	.uni-button-primary[type=primary] {
		background: linear-gradient(135deg, #0081ff, #0069cc);
	}

	.password-tips {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
		padding: 0 10rpx;
	}

	.form-header {
		text-align: center;
		margin-bottom: 40rpx;

		.icon {
			font-size: 100rpx;
			color: #0069cc;
			margin-bottom: 20rpx;
		}

		.title {
			font-size: 40rpx;
			font-weight: bold;
			color: #0069cc;
		}
	}
</style>